Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / network-visualiser / internal / NetworkVisualiserLoadingOverlay.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<div

Te6edf3v-if=Ta5d6ff"Ta5d6ffisLoadingTa5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffabsolute inset-0 z-20 flex items-center justify-center bg-zinc-950/15 transition-all duration-300Ta5d6ff"

Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffbg-white/90 dark:bg-zinc-900/90 border border-gray-200 dark:border-zinc-800 rounded-2xl px-6 py-4 flex flex-col items-center gap-3Ta5d6ff"

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffrelativeTa5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffw-12 h-12 border-4 border-blue-500/20 border-t-blue-500 rounded-full animate-spinTa5d6ff"Tff7b72>Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffabsolute inset-0 flex items-center justify-centerTa5d6ff"Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffw-6 h-6 border-4 border-emerald-500/20 border-b-emerald-500 rounded-full animate-spin-reverseTa5d6ff"

Tff7b72>Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6fftext-sm font-medium text-gray-900 dark:text-zinc-100Ta5d6ff"Tff7b72>{{ loadingStatus }}Tff7b72</div>

Tff7b72<div Te6edf3v-if=Ta5d6ff"Ta5d6fftotalNodesToLoad > 0Ta5d6ff" Te6edf3class=Ta5d6ff"Ta5d6ffw-48 space-y-2Ta5d6ff"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"Ta5d6ffh-1.5 bg-gray-200 dark:bg-zinc-800 rounded-full overflow-hiddenTa5d6ff"Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"Ta5d6ffh-full bg-blue-500 transition-all duration-300 shadow-[0_0_8px_rgba(59,130,246,0.5)]Ta5d6ff"

Te6edf3:style=Ta5d6ff"Ta5d6ff{ width: `Tff7b72${Tb4b4b4(Te6edf3loadedNodesCount Tff7b72/ Te6edf3totalNodesToLoadTb4b4b4) Tff7b72* T79c0ff100Tff7b72}Ta5d6ff%` }Ta5d6ff"

Tff7b72>Tff7b72</div>

Tff7b72</div>

Tff7b72<div

Te6edf3v-if=Ta5d6ff"Ta5d6fftotalBatches > 0Ta5d6ff"

Te6edf3class=Ta5d6ff"Ta5d6ffflex justify-between items-center text-[10px] font-bold text-gray-500 dark:text-zinc-500 uppercase tracking-widerTa5d6ff"

Tff7b72>

Tff7b72<spanTff7b72>{{ Te6edf3$t("visualiser.batch") }} {{ currentBatch }} / {{ totalBatches }}Tff7b72</span>

Tff7b72<spanTff7b72>{{ Math.round((loadedNodesCount / totalNodesToLoad) * 100) }}%Tff7b72</span>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

export default {

name: "NetworkVisualiserLoadingOverlay",

props: {

isLoading: { type: Boolean, default: false },

loadingStatus: { type: String, default: "" },

totalNodesToLoad: { type: Number, default: 0 },

loadedNodesCount: { type: Number, default: 0 },

currentBatch: { type: Number, default: 0 },

totalBatches: { type: Number, default: 0 },

},

};

Tff7b72</script>